<template>
  <div class="pagination">
    <n-pagination
      :page="currentPage" 
      :page-count="pageCount" 
      :page-slot="7" 
      id="my-pagination"
      :on-update:page="onUpdate"
      :style="{
        '--pagination-bg-color': sideTheme=='theme-light'?'#fff':'#0d0d0d',
        '--pagination-font-color': sideTheme=='theme-light'?'#99a9bf':'rgba(255,255,255,0.7)',
        '--pagination-bg-active':'#00c4b6',
        '--pagination-bg-hover': sideTheme=='theme-light'?'#ff7242':'#383838',
        '--pagination-font-active': sideTheme=='theme-light'?'#fff':'rgba(255,255,255,0.9)'
      }
      "
    />
  </div>
</template>

<script setup name="Pagination">
import { toRefs, computed } from "vue"
import anime from 'animejs'
import { useSettingsStore } from "@/store"
import { useRoute } from 'vue-router';

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

const route = useRoute();

const Props = defineProps({
  total: {
    required: true,
    type: Number
  },
  page: {
    type: Number,
    default: 1
  },
  limit: {
    type: Number,
    default: 10
  }
})
const { total, page, limit } = toRefs(Props)

const emit = defineEmits();

const currentPage = computed({
  get() {
    return page.value
  },
  set(val) {
    emit('update:page', val)
  }
})
const pageCount = computed({
  get() {
    return Math.ceil(total.value/limit.value)
  }
})

const onUpdate = (val) => {
  currentPage.value = val;
  let app = document.documentElement;
  if (route.path=="/") {
    anime({
      targets: app,
      scrollTop: document.body.offsetHeight-180,
      easing: 'easeInCubic',
      duration: 500,
    })
  } else {
    anime({
      targets: document.documentElement,
      scrollTop: 0,
      easing: 'easeInCubic',
      duration: 500,
    })
  }
  emit('pagination', { page: val })
}
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

::v-deep {
  .n-pagination .n-pagination-item {
    width: 38px;
    height: 38px;
    background: var(--pagination-bg-color);
    color: var(--pagination-font-color);
    border-radius: 8px;
    font-size: 18px;
    line-height: 40px;
  }
  .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
    background: var(--pagination-bg-active);
    color: var(--pagination-font-active);
  }
  .n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover {
    background: var(--pagination-bg-hover);
    color: var(--pagination-font-active);
  }

  .n-pagination .n-pagination-item.n-pagination-item--button {
    border: none;
  }
  .n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button {
    border: none;
  }
  .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
    border: none;
  }
  .n-pagination .n-pagination-item.n-pagination-item--disabled.n-pagination-item--active, .n-pagination .n-pagination-item.n-pagination-item--disabled.n-pagination-item--button {
    display: none;
  }
}
</style>
